<!-- eslint-disable no-console -->
<!-- eslint-disable no-console -->
<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2023-07-01 16:22:48
 * @LastEditTime: 2024-05-30 17:36:48
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view class="c_container">
        <u-subsection :list="channels" v-model="current" @change="change"></u-subsection>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import { route } from '@/utils/common';
const props = withDefaults(
    defineProps<{
        isPreview?: boolean
        shopId?: string
        paymentChannel?: string;
    }>(),
    {
        paymentChannel: '',
        shopId: '',
        isPreview: false
    }
)
const current = ref(0)

const channels = [
    {
        name: '盛付通',
        value: 'sft',
        icon: 'https://img0.shengpay.com/site/shengpay/images/logo.png',
        path: '/packageB/pages/paymentAccess/sft'
    },
    {
        name: '拉卡拉',
        value: 'lkl',
        icon: 'https://www.lakala.com/storage/topic/20200904/476e4e31e53175f17e15d3055d8ab189.png',
        path: '/packageB/pages/paymentAccess/index'
    }
]
watch(() => props.paymentChannel, (n) => {
    current.value = channels.findIndex(item => item.value === n)
    console.log(current.value)
},{
    immediate: true
})
function change(index: number) {
    const { path, value } = channels[index]
    const params = {
        shopId: props.shopId,
        isPreview: props.isPreview,
        paymentChannel: value,
        from: 'app'
    }
    route({
        url: path,
        params,
        type: 'redirect'
    })
}

</script>
  
<style lang="scss" scoped>
.c_container {
    padding: 0 0 40rpx 0;
}

.c_content {
    padding: 60rpx;

    .tit {
        text-align: center;

        .strong {
            font-size: 30rpx;
            color: #000;
            font-weight: bold;
            margin-bottom: 10rpx;
        }

    }

    .channels {
        margin-top: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .channel {
            margin-top: 100rpx;
            padding-bottom: 30rpx;
            display: flex;
            align-items: center;
            gap: 10rpx;

            &:first-child {
                // border-bottom: 2rpx solid #999;
            }
        }
    }


}
</style>
  